<template>
  <div class="box-border eqList" style="height:100%">
    <div class="tit">设备列表</div>
    <div v-for="(item, index) in eqList" :key="index">
      <p class="left" :class="{ runing: item.isRuning }">
        <span style="padding-right:15px">
          <!-- #21ffb3 -->
          <a-icon
            :style="{ color: item.state == '运行' ? '#21ffb3' : '#ddd' }"
            type="codepen-circle"
          ></a-icon
        ></span>
        <span :style="{ color: item.state == '运行' ? '#21ffb3' : '#ddd' }">{{
          item.name
        }}</span>
        <!-- <span style="padding-left:15px" v-if="item.state == '运行'">
        <a-icon style="color: #21ffb3; font-size:12px" type="check"> </a-icon
      ></span> -->
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    eqList: {
      type: Array,
      default: () => [],
    },
    eqname: {
      type: String,
      default: '',
    },
  },
  watch: {
    eqname(val) {
      console.log('设备名称', val)

      this.eqList.forEach((item) => {
        if (item.name == val) {
          item['isRuning'] = true
        } else {
          item['isRuning'] = false
        }
      })
    },
  },
  data() {
    return {
      isRuning: true,
    }
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.eqList {
  padding: 15px;
}
.left {
  .px2vh(line-height, 44);
  text-align: left;
  .px2font(13);
  .anticon {
    .px2font(20);
    vertical-align: middle;
  }
}
.tit {
  .px2font(15);
}
.runing {
  font-weight: bold;
  border: 1px solid #ff0000;
}
</style>
